import {
  changeModal,
  getClassifyAsync,
} from "@/store/gameClassify/gameClassifySlice";
import { useAppDispatch, useAppSelector } from "@/store/hooks";
import { Form, Input, Modal, Select } from "antd";
import { useEffect, useState, type ReactElement } from "react";
import { create, update } from "@/store/gameClassify/gameClassifyAPI";
import { getConfigAsync } from "@/store/app/appSlice";

export default function Create(): ReactElement<typeof Modal, "div"> {
  const [loading, setLoading] = useState<boolean>(false);
  const { modal, params } = useAppSelector((state) => state.gameClassify);
  const {
    config: {
      data: { data: { switch_conf = [], user_channel_list = [] } = {} } = {},
    } = {},
  } = useAppSelector((state) => state.app);
  const dispatch = useAppDispatch();
  const [form] = Form.useForm();

  const handleClose = () => {
    dispatch(changeModal({ open: false }));
    form.resetFields();
  };

  const handleOk = async () => {
    try {
      const values = await form.validateFields();
      setLoading(true);
      const p = new FormData();
      p.append("channel", values.channel);
      p.append("cn_name", values.cn_name);
      p.append("en_name", values.en_name);
      p.append("pt_name", values.pt_name);
      p.append("class_order", values.class_order);
      p.append("class_state", values.class_state);
      if (modal.type === "create") {
        create(p)
          .then(() => {
            handleClose();
            dispatch(getClassifyAsync({ ...params }));
            dispatch(getConfigAsync({}))
          })
          .finally(() => setLoading(false));
      } else if (modal.type === "update") {
        p.append("class_id", String(modal.record?.class_id));
        update(p)
          .then(() => {
            handleClose();
            dispatch(getClassifyAsync({ ...params }));
            dispatch(getConfigAsync({}))
          })
          .finally(() => setLoading(false));
      }
    } catch (err) {
      console.log("校验不通过");
    }
  };

  useEffect(() => {
    if (modal.open && modal.type === "update") {
      form.setFieldsValue(modal.record);
      form.setFieldValue('class_icon', [
        {
          uid: "-1",
          name: modal.record?.icon,
          status: "done",
          url: modal.record?.icon,
        },
      ])
    }
  }, [modal]);

  return (
    <Modal
      open={modal.open}
      title={modal.type === "create" ? "创建" : "编辑"}
      onCancel={handleClose}
      onOk={handleOk}
      confirmLoading={loading}
    >
      <Form form={form}>
        <Form.Item
          name="channel"
          rules={[{ required: true, message: "必填" }]}
          label="渠道"
        >
          <Select options={user_channel_list} />
        </Form.Item>
        <Form.Item
          name="cn_name"
          rules={[{ required: true, message: "必填" }]}
          label="中文名"
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="en_name"
          rules={[{ required: true, message: "必填" }]}
          label="英语名"
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="pt_name"
          rules={[{ required: true, message: "必填" }]}
          label="葡语名"
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="class_order"
          rules={[{ required: true, message: "必填" }]}
          label="分类排序"
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="class_state"
          rules={[{ required: true, message: "必填" }]}
          label="状态"
        >
          <Select options={switch_conf} />
        </Form.Item>
      </Form>
    </Modal>
  );
}
